<template>
    <div class="placeholder"></div>
    <!-- 导航栏 -->
    <div class="navBar">
        <van-nav-bar :title="title" left-arrow @click-left="onClickLeft" @click-right="onClickRight">
            <template #right>
                <van-icon name="weapp-nav" size="18"/>
            </template>
        </van-nav-bar>
    </div>
</template>

<script setup lang="ts">
import {useRouter} from "vue-router";

// 实例化路由
const router = useRouter()

// 返回按钮
const onClickLeft = () => {
    history.back()
}

// 好友信息
const onClickRight = () => {
    router.push({
      name: "showFriend",
      //使用query传递好友id
      query:{
        id:props.friendId
      }
    })
}

// 声明props
const props = defineProps<{title:string,friendId:number}>()

</script>

<style scoped lang="less">
.placeholder{
    height: 40px;
}

.navBar{
    position: fixed;
    top: 0;
    width: 100vw;
    z-index: 9999;
}
</style>